<template>
  <div>
    <Card>
      <p slot="title" class="card-title">
        <Icon type="home"></Icon>
        <span>路由管理</span>
      </p>
      <div>
        <Row>
          <Col span="15" class="margin-bottom-10">
            <Button type="info" @click="openAddModal(null)">
              <Icon type="md-add"></Icon>&nbsp;路由节点
            </Button>
            <Button type="success" @click="getData">
              <Icon type="md-refresh"></Icon>&nbsp;刷新数据
            </Button>
          </Col>
        </Row>
        <div class="tables">
          <Table border :columns="columns" :data="datas">
            <template slot-scope="{ row }" slot="strategyType">
              <strong>{{StrategyType[row.strategyType-1].name}}</strong>
            </template>
            <template slot-scope="{ row, index }" slot="action">
              <Button type="primary" @click="openAddModal(row)" size="small">编辑</Button>
              <Button type="error" @click="remove(row.id)" size="small">删除</Button>
            </template>
          </Table>
        </div>
        <Page :total="dataCount" :page-size="pageSize" show-total show-sizer class="paging" @on-change="changepage"
              @on-page-size-change="changepagesize"></Page>
      </div>
    </Card>
    <Modal v-model="modal.show" :title="modal.type==1 ? '添加路由':'更新路由'"
           @on-ok="modalOk"
           :mask-closable="false">
      <Alert show-icon>名称就是备注</Alert>
      <Form :model="modal.data" :label-width="80">
        <FormItem v-if="modal.type==2" label="ID">
          <Input disabled :value="modal.data.id"></Input>
        </FormItem>

        <FormItem label="名称/描述">
          <Input v-model.trim="modal.data.desc"></Input>
        </FormItem>

        <FormItem label="URI(规则)">
          <Input v-model.trim="modal.data.url"></Input>
        </FormItem>

        <FormItem label="负载策略">
          <Select v-model.trim="modal.data.strategyType" style="width:100%">
            <Option v-for="item in StrategyType"
                    :value="item.value" :key="item.value">{{item.name}}
            </Option>
          </Select>
        </FormItem>

        <FormItem label="节点选择">
          <Select v-model.trim="modal.data.nodeIds" multiple style="width:100%">
            <Option v-for="item in listItem"
                    :value="item.id" :key="item.id">{{item.id}}-({{item.type==0?'线上':'备用'}}--{{item.desc}})
            </Option>
          </Select>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
  import {allNode} from '@/api/serverNode'
  import {addRouter, listRouter, updateRouter,removeRouter} from '@/api/routers'

  const StrategyType=[
    {name:'轮询',value:1},
    {name:'随机',value:2},
    {name:'源地址哈希一致',value:3},
    {name:'加权轮询',value:4},
    {name:'最小连接数',value:5},
  ];

  export default {
    data() {
      return {
        dataCount: 0,
        // 每页显示多少条
        pageSize: 10,
        page: 1,
        columns: [
          {
            title: '路由ID',
            key: 'id',
          },
          {
            title: '路由URL',
            key: 'url',
          },
          {
            title: '路由(名字/描述)',
            key: 'desc',
          },
          {
            title: '负载类型',
            slot: 'strategyType',
          },
          {
            title: '操作',
            slot: 'action',
            width: 150,
            align: 'center'
          }
        ],
        datas: [],
        modal: {
          show: false,
          type: 1,
          data: {
            id: 0,
            desc: '',
            url: '',
            nodeIds: [],
          }
        },
        removeObject: null,
        listItem: [],
        StrategyType
      }
    },
    created() {
      this.getData()
      this.getAllNode()
    },
    methods: {
      getAllNode() {
        let _this = this;
        allNode().then((data) => {
          if (data.data.code === 200) {
            _this.listItem = data.data.data;
          } else {
            this.$Message.error(data.data.msg)
          }
        });
      },
      getData() {
        let _this = this;
        listRouter("?page=" + this.page + "&pageSize=" + this.pageSize).then((data) => {
          console.log(data)
          if (data.data.code === 200) {
            _this.datas = data.data.data.list;
            _this.dataCount = data.data.data.totalRow;
          } else {
            this.$Message.error(data.data.msg)
          }
        });
      },
      openAddModal(row) {

        // 看看下下拉列表是否有值，没得就重新加载哈
        if (this.listItem.length === 0) {
          this.getAllNode();
        }

        if (row === null) {
          this.modal.type = 1;
          this.modal.data = {
            id: 0,
            desc: '',
            url: '',
            nodeIds: [],
          }
        } else {
          this.modal.type = 2;
          console.log(row);
          this.modal.data = row;
          let nodeIds = row.nodeIds;
          if ((nodeIds instanceof Array) === false) {
            this.modal.data.nodeIds = nodeIds.split(",");
          }
        }
        console.log(this.modal.data)
        this.modal.show = true
      },
      modalOk() {
        if (this.modal.type === 1) {
          this.add()
        } else {
          this.update();
        }
      },
      add() {
        this.$Message.loading({
          content: '资源添加中...',
          duration: 0
        });
        try {
          console.log(this.modal.data)
          addRouter(this.modal.data).then((data) => {
            if (data.data.code === 200) {
              this.$Message.success(data.data.msg)
            } else {
              this.$Message.error(data.data.msg)
            }
            this.$Message.destroy()
            this.getData()
          });

        } catch (error) {
          console.log(error)
        }
      },
      update() {
        this.$Message.loading({
          content: '资源更新中...',
          duration: 0
        });
        try {
          console.log(this.modal.data)
          updateRouter(this.modal.data).then((data) => {
            if (data.data.code === 200) {
              this.$Message.success(data.data.msg)
            } else {
              this.$Message.error(data.data.msg)
            }
            this.getData()
          });
          this.$Message.destroy()
        } catch (error) {
          console.log(error)
        }
      },
      remove(id) {
        console.log(id)
        try {
          removeRouter("?id=" + id).then((data) => {
            if (data.data.code === 200) {
              this.$Message.success(data.data.msg)
            } else {
              this.$Message.error(data.data.msg)
            }
            this.getData()
          });
          this.$Message.destroy()
        } catch (error) {
          console.log(error)
        }
      },
      changepage(page) {
        this.page = page;
        this.getData();
      },
      changepagesize(pageSize) {
        this.pageSize = pageSize;
      }
    }
  }
</script>
<style>
  .tables {
    margin: 10px 0;
  }
</style>
